<template>
  <div>
    <el-header>
      <el-link>
        <el-button type="primary" @click="dialogVisible = true" icon="el-icon-circle-plus-outline">添加</el-button>
      </el-link>
    </el-header>
    <div style="height: 900px">

      <el-dialog
        title="添加"
        :visible.sync="dialogVisible"
        width="30%"
      >
        <el-form style="width: 40% " :model="xzlForm" ref="xzlForm" label-width="150px" class="demo-ruleForm">
          <el-form-item label="写字楼楼号" prop="number">
            <el-input v-model="xzlForm.number"></el-input>
          </el-form-item>
          <el-form-item label="占地面积" prop="area">
            <el-input v-model="xzlForm.area"></el-input>
          </el-form-item>
          <el-form-item label="物业费" prop="carea">
            <el-input v-model="xzlForm.carea"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('xzlForm')">确 定</el-button>
  </span>
      </el-dialog>
      <el-table
        :data="users"
        style="width: 100% "
      >
        <el-table-column
          prop="id"
          width="180">
        </el-table-column>
        <el-table-column
          prop="number"
          label="写字楼楼号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="area"
          label="占地面积"
          width="180">
        </el-table-column>
        <el-table-column
          prop="carea"
          label="物业费"
          width="180">
        </el-table-column>

        <el-table-column
          label="操作" height="100px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="del(scope.row.id)"
            >删除
            </el-button>
            <el-button type="primary" icon="el-icon-edit-outline"  @click="edit(scope.row)" plain>编辑</el-button>
            <el-dialog
              title="编辑"
              :visible.sync="updateDialogVisible"
              width="30%"
            >
              <el-form style="width: 40%" :model="xzlForm"  ref="xzlForm" label-width="100px" class="demo-ruleForm">
                <el-form-item  label="编号" prop="id">
                  <el-input v-model="xzlForm.id" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="写字楼楼号" prop="number">
                  <el-input v-model="xzlForm.number"></el-input>
                </el-form-item>
                <el-form-item label="占地面积" prop="area">
                  <el-input v-model="xzlForm.area"></el-input>
                </el-form-item>
                <el-form-item label="物业费" prop="carea">
                  <el-input v-model="xzlForm.carea"></el-input>
                </el-form-item>

              </el-form>
              <span slot="footer" class="dialog-footer">
            <el-button @click="updateDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="update(xzlForm)">确 定</el-button>
            </span>
            </el-dialog>

          </template>
        </el-table-column>

      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'xzl',
  inject: ['reload'],
  data () {
    return {
      msg: 'hello world',
      users: [],
      input: '',
      dialogVisible: false,
      updateDialogVisible: false,
      xzlForm: {
        number: '',
        area: '',
        carea: ''
      }
    }
  },
  created () {
    const that = this
    this.$axios.get('http://localhost:8001/Xzl/list/')
      .then(function (response) {
        console.log(response)
        that.users = response.data
      })
  },
  methods: {
    async del (oid) {
      const confirmResult = await this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消')
      }
      this.$axios.post('http://localhost:8001/Xzl/delete?id=' + oid)
      this.reload()
    },
    submitForm (querystring) {
      var qs = require('querystring')
      this.$axios.post('http://localhost:8001/Xzl/add', qs.stringify(this.xzlForm))
      this.reload()
    },
    edit (xzlForm) {
      this.xzlForm = xzlForm
      this.updateDialogVisible = true
    },
    update () {
      var qs = require('querystring')
      this.$axios.post('http://localhost:8001/Xzl/update', qs.stringify(this.xzlForm))
      this.reload()
    }
  }
}
</script>

<style scoped>

</style>
